<template>
  <div>
    <span :id="eleId"></span>
  </div>
</template>
<script>
import CountUp from 'countup'
export default {
  name: 'countTo',
  props: {
    /**
     * @description 开始值
    */
    startValue: {
      type: Number,
      default: 0
    },

    /**
     * @description 结束值
    */
    endValue: {
      type: Number,
      required: true
    },

    /**
     * @description 保留小数点位数
    */
    decimals: {
      type: Number,
      defaults: 0
    },

    /**
     * @description 渐变时间(s)
    */
    durations: {
      type: Number,
      defaults: 1
    },

    /**
     * @description 是否变速
    */
    useasing: {
      type: Boolean,
      defaults: false
    },

    /**
     * @description 是否分组
    */
    usgrouping: {
      type: Boolean,
      defaults: true
    },

    /**
     * @description 分组符号
    */
    Separator: {
      type: String,
      defaults: ','
    },

    /**
     * @description 小数点符号
    */
    Decimal: {
      type: String,
      defaults: '.'
    }
  },
  data() {
    return {}
  },
  computed: {
    eleId() {
      return `count_up_${this._uid}`
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.counter = new CountUp(this.eleId, this.startValue, this.endValue, this.decimals, this.durations, {
      // 配置对象
        useasing: this.useasing,
        usgrouping: this.usgrouping,
        Separator: this.Separator,
        Decimal: this.Decimal
      })
      setTimeout(() => {
        this.counter.start()
      }, 1000)
    })
  }
}
</script>
